<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Knattertron</title>
    <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
    <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">	
    <!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
    <link rel="stylesheet" href="css/common.css" type="text/css" media="screen, projection">
    <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
     <script type="text/javascript" src="js/common.js"></script>
    <script>
    _G = {
      'currentStatus': -1
    }
    
    $(function() {
      // Iterate all elements that have the progress class and turns them into textual progress indicators
      $(".progress").each(function() {
        var self = $(this);
        var i = 0;
        
        var tick = function(i) {
          i = (i == 4) ? 0 : i + 1;
          
          var str = "";
          for(var j = 0; j < i; j++)
            str += ".";
          self.text(str);
          
          setTimeout(arguments.callee, 500, i);
        };
        
        tick(i);        
      });
      
      UpdateQueue();
    });
    
    function UpdateQueue() {
      $.get("/status", function(data) {
        if(data && data.success)
        {
          // If the uptodate status is the same as the last time we checked, do nothing
          if(_G['currentStatus'] == data.status)
            return;
            
          // Remove current background-color
          $("#queueStatus").attr('class', function(i, c){ 
            return c.replace(/\bcolor-\S+/g, '');
          });
          
          if(data.status == 1) {
            $("#queueStatus").text("Stuck in the player pool, waiting for better times.");
            $("#queueStatus").addClass("queueBlock_inPlayerPool");
          }
          else if(data.status == 2) {
            $("#queueStatus").text("Placed in a queue, getting ready to rumble.");
            $("#queueStatus").addClass("queueBlock_inQueueList");
            UpdateQueueList(data.data.queueList);
          }
          else if(data.status == 3) {
            $("#queueStatus").text("The queue is ready, let's go.");
            $("#queueStatus").addClass("queueBlock_inCountdown");
            UpdateQueueList(data.data.queueList);
            UpdateCountdown(data.data.countdown);
          }
          else if(data.status == 4) {
            window.location = "game.html";
          }
          else {
            log.error("Error during queue update:\n\nUnrecognized status received");            
          }
        }
        else if(data && data.error)
          log.error("Failed to update queue:\n\n" + data.message);
        else
          log.error("Failed to update queue:\n\nUnnown server response received during update attempt.");
      }, "json");
      
      setTimeout(UpdateQueue, 1000);
    }
    
    function UpdateQueueList(queueList) {
      $("#queueList").html("");
      for(var i in queueList) {
        $("#queueList").append("(" + queueList[i].id + ") <b>" + queueList[i].playername + "</b><br>");
      }
    }
    
    function UpdateCountdown(countdownMS) {
      $("#queueCountdown").text("Starting in " + Math.round(parseInt(countdownMS) / 1000) + " seconds...");
    }
    </script>    
  </head>
  <body>
    <div class="container">  
      <div class="span-24 last lblTitle prepend-bottom prepend-top">Knattertron</div>
      <div class="span-24 last prepend-bottom prepend-top center">[ <a href="login.html">Quit</a> ]</div>
      <div class="span-5">&nbsp</div>
      <div class="span-14 prepend-top queueBlock">
        <div id="queueStatus" class="prepend-top prepend-bottom center">Resolving queue status<span class="progress"></span></div>
        <div id="queueCountdown" class="center"></div>
        <div id="queueList"></div>
      </div>
      <div class="span-5 last">&nbsp;</div>
    </div>
  </body>
</html>